<template>
  <div class="user-coupon-manager">
    <!-- 统计数据 -->
    <el-row :gutter="20" class="statistics">
      <el-col :span="6" v-for="stat in statistics" :key="stat.title">
        <el-card shadow="hover">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-title">{{ stat.title }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 查询条件 -->
    <div class="search-section">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="优惠券">
          <el-select
            v-model="searchForm.couponId"
            placeholder="请选择优惠券"
            class="wide-select"
            style="width: 200px"
          >
            <el-option
              v-for="item in couponOptions"
              :key="item.couponId"
              :label="item.couponName"
              :value="item.couponId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            class="wide-select"
            style="width: 200px"
          >
            <el-option label="未使用" :value="0" />
            <el-option label="已使用" :value="1" />
            <el-option label="已过期" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border stripe v-loading="loading">
      <el-table-column prop="ucId" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="couponName" label="优惠券名称" min-width="150" />
      <el-table-column label="优惠内容" width="150">
        <template #default="{ row }">
          <div v-if="row.couponType === 1">
            满{{ row.minOrderAmount }}减{{ row.amount }}
          </div>
          <div v-else-if="row.couponType === 2">
            {{ row.amount }}折
          </div>
          <div v-else>
            立减{{ row.amount }}元
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="getTime" label="领取时间" width="180" />
      <el-table-column prop="useTime" label="使用时间" width="180">
        <template #default="{ row }">
          {{ row.useTime || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="expireTime" label="过期时间" width="180" />
      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button 
            v-if="row.status === 0"
            type="danger" 
            size="small" 
            @click="handleInvalidate(row)"
          >
            作废
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="showDetail(row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详情抽屉 -->
    <el-drawer
      v-model="showDetailDrawer"
      title="优惠券使用详情"
      size="600px"
    >
      <template v-if="currentDetail">
        <div class="detail-content">
          <div class="detail-section">
            <h3>用户信息</h3>
            <div class="info-item">
              <span class="label">用户名：</span>
              <span>{{ currentDetail.username }}</span>
            </div>
            <div class="info-item">
              <span class="label">手机号：</span>
              <span>{{ currentDetail.phone }}</span>
            </div>
          </div>

          <div class="detail-section">
            <h3>优惠券信息</h3>
            <div class="info-item">
              <span class="label">优惠券名称：</span>
              <span>{{ currentDetail.couponName }}</span>
            </div>
            <div class="info-item">
              <span class="label">优惠内容：</span>
              <span>
                <template v-if="currentDetail.couponType === 1">
                  满{{ currentDetail.minOrderAmount }}减{{ currentDetail.amount }}
                </template>
                <template v-else-if="currentDetail.couponType === 2">
                  {{ currentDetail.amount }}折
                </template>
                <template v-else>
                  立减{{ currentDetail.amount }}元
                </template>
              </span>
            </div>
            <div class="info-item">
              <span class="label">领取时间：</span>
              <span>{{ currentDetail.getTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">过期时间：</span>
              <span>{{ currentDetail.expireTime }}</span>
            </div>
          </div>

          <div v-if="currentDetail.status === 1" class="detail-section">
            <h3>使用信息</h3>
            <div class="info-item">
              <span class="label">订单编号：</span>
              <span>{{ currentDetail.orderId }}</span>
            </div>
            <div class="info-item">
              <span class="label">使用时间：</span>
              <span>{{ currentDetail.useTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">订单金额：</span>
              <span>¥{{ currentDetail.orderAmount }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const statistics = ref([
  { title: '已发放总数', value: 1234 },
  { title: '已使用数量', value: 567 },
  { title: '未使用数量', value: 456 },
  { title: '已过期数量', value: 211 }
])

// 查询条件
const searchForm = reactive({
  username: '',
  couponId: '',
  status: ''
})

// 优惠券选项
const couponOptions = ref([
  { couponId: 1, couponName: '新人优惠券' },
  { couponId: 2, couponName: '满100减10' },
  { couponId: 3, couponName: '9折优惠券' }
])

// 表格数据
const loading = ref(false)
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 模拟数据加载
const loadData = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = Array.from({ length: 10 }).map((_, index) => ({
      ucId: index + 1,
      username: `user${index + 1}`,
      couponName: '新人优惠券',
      couponType: Math.floor(Math.random() * 3) + 1,
      amount: 50,
      minOrderAmount: 100,
      getTime: '2024-01-01 12:00:00',
      useTime: Math.random() > 0.5 ? '2024-01-02 15:30:00' : null,
      expireTime: '2024-12-31 23:59:59',
      status: Math.floor(Math.random() * 3),
      orderId: 'ORDER123456',
      orderAmount: 199,
      phone: '13800138000'
    }))
    total.value = 100
    loading.value = false
  }, 500)
}

// 状态处理
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'info'
  }
  return typeMap[status]
}

const getStatusText = (status) => {
  const textMap = {
    0: '未使用',
    1: '已使用',
    2: '已过期'
  }
  return textMap[status]
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadData()
}

// 作废处理
const handleInvalidate = async (row) => {
  try {
    await ElMessageBox.confirm('确定要作废该优惠券吗？', '提示', {
      type: 'warning'
    })
    ElMessage.success('作废成功')
    loadData()
  } catch {
    // 取消操作
  }
}

// 详情处理
const showDetailDrawer = ref(false)
const currentDetail = ref(null)

const showDetail = (row) => {
  currentDetail.value = row
  showDetailDrawer.value = true
}

// 初始化
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.user-coupon-manager {
  padding: 20px;

  .statistics {
    margin-bottom: 20px;

    .el-card {
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;
      }

      .stat-title {
        color: #666;
      }
    }
  }

  .search-section {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;

    .wide-select {
      min-width: 200px;
      max-width: 300px;
    }
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .detail-content {
    .detail-section {
      margin-bottom: 30px;

      h3 {
        font-size: 16px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
      }

      .info-item {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .label {
          width: 100px;
          color: #666;
        }
      }
    }
  }
}
</style>
